<template>
    <el-card class="role-list-card">
        <template #header>
            <div class="card-header">
                <h2 style="margin: 0; font-size: 20px;">管理角色</h2>
            </div>
        </template>
        <!-- 搜索和添加区域 -->
        <div class="search-add-area" style="margin-bottom: 20px;">
            <el-input v-model="searchRoleName" placeholder="角色名称" style="width: 200px; margin-right: 10px;" />
            <el-button type="primary" @click="getRoleway()">查询</el-button>
            <el-button type="success"
                @click="OpenRoleAdd = true; RoleData.RoleName = ''; RoleData.PermissionIdArray = []; RoleData.CreateTiem = ''">添加</el-button>
        </div>
        <!-- 角色数据表格 -->
        <el-table :data="tabledate" style="width: 100%">
            <el-table-column prop="Id" label="角色编号" width="180" align="center" />
            <el-table-column prop="RoleName" label="角色名称" width="120" align="center" />
            <el-table-column prop="PermissionNames" label="权限" width="200" align="center" />
            <el-table-column prop="IsUse" label="是否启用" width="100" align="center">
                <template v-slot="scope">
                    <el-tag type="success" v-if="scope.row.IsUse">启用</el-tag>
                    <el-tag type="danger" v-else>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column type="index" label="序号" width="80" align="center" />
            <el-table-column prop="CreateTiem" label="创建时间" width="160" align="center">
                <template v-slot="scope">
                    {{ moment(scope.row.CreateTiem).format("yyyy年MM月DD日HH:MM:ss") }}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="220" fixed="right" align="center">
                <template v-slot="scope">
                    <el-button type="text" @click="RoleDelway(scope.row)">删除</el-button>
                    <el-button type="text" @click="OpenRoleUpdateWay(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 角色添加对话框 -->
        <el-dialog v-model="OpenRoleAdd" title="角色新增" width="500">
            {{ RoleData }}
            <el-form :model="RoleData" label-width="auto" style="max-width: 600px">
                <el-form-item label="角色名称">
                    <el-input v-model="RoleData.RoleName" />
                </el-form-item>
                <el-form-item label="权限">
                    <el-checkbox-group v-model="RoleData.PermissionIdArray">
                        <el-checkbox v-for="item in PermissionData" :value="item.Id">
                            {{ item.PermissionName }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="RoleData.IsUse" class="ml-2" inline-prompt
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="启用"
                        inactive-text="禁用" />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="RoleData.CreateTiem" type="datetime" placeholder="请选择创建时间"
                        format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s a" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="RoleAddway()">添加</el-button>
                    <el-button @click="OpenRoleAdd = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 角色修改对话框 -->
        <el-dialog v-model="OpenRoleUpdate" title="角色编辑" width="500">
            {{ RoleData }}
            <el-form :model="RoleData" label-width="auto" style="max-width: 600px">
                <el-form-item label="角色名称">
                    <el-input v-model="RoleData.RoleName" />
                </el-form-item>
                <el-form-item label="权限">
                    <el-checkbox-group v-model="RoleData.PermissionIdArray">
                        <el-checkbox v-for="item in PermissionData" :value="item.Id">
                            {{ item.PermissionName }}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="是否启用">
                    <el-switch v-model="RoleData.IsUse" class="ml-2" inline-prompt
                        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" active-text="启用"
                        inactive-text="禁用" />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker v-model="RoleData.CreateTiem" type="datetime" placeholder="请选择创建时间"
                        format="YYYY/MM/DD HH:mm:ss" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="RoleUpdateWay()">保存</el-button>
                    <el-button @click="OpenRoleUpdate = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 分页组件 -->
        <div>
            <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize"
                :page-sizes="[2, 4, 6, 8, 10]" layout="total, sizes, prev, pager, next, jumper" :total="page.totalcount"
                :size="size" :current-page-label="'当前页'" :page-sizes-label="'每页显示条数'" :prev-text="'上一页'"
                :next-text="'下一页'" :jumper-text="['前往', '页']" />
        </div>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, watch, onMounted } from 'vue'
import { ElCard, ElInput, ElButton, ElTable, ElTableColumn, ElPagination, ElTag, ElMessage, ElMessageBox } from 'element-plus'
import type { ComponentSize } from 'element-plus'
const size = ref<ComponentSize>('default')
import httpaxios from '@/AxiosHelp';
import moment from 'moment';
httpaxios.defaults.baseURL = "http://localhost:5297"
onMounted(() => {
    getRoleway()  //获取角色数据
    GetPermissions() //多选框
})
//#region  角色分页查询部分
// 搜索关键词
const searchRoleName = ref('')
// 分页数据
const page = reactive({
    pageindex: 1,
    pagesize: 4,
    totalcount: 0
})
//查询到的数据
const tabledate = ref([]);
const getRoleway = () => {
    httpaxios.get("/api/Roles/RoleGet", {
        params: {
            RoleName: searchRoleName.value,
            pageindex: page.pageindex,
            pagesize: page.pagesize
        }
    }).then(res => {
        console.log(res.data);

        tabledate.value = res.data.PageData;
        page.totalcount = res.data.Totalcount;
    })
}
//分页侦听器
watch(page, () => {
    getRoleway();
})
//#endregion

//#region  角色删除部分
const RoleDelway = (row: any) => {

    ElMessageBox.confirm(
        '确认要删除角色信息吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        httpaxios.put("/api/Roles/RoleDel", { Id: row.Id }).then(res => {
            console.log(res.data);
            if (res.data.Code == 200) {
                ElMessage.success(res.data.Message)
                //刷新页面
                getRoleway();
            }
            else {
                ElMessage.error(res.data.Message)
            }
        })
    })
}
//#endregion

//#region  角色添加部分
const OpenRoleAdd = ref(false);
const RoleData = reactive({
    Id: null,
    "RoleName": "",
    "CreateTiem": "",
    "IsUse": true,
    "PermissionIds": "",  //权限主键字符串
    PermissionIdArray: [] //权限数组 
})
const PermissionData = ref([{
    "Id": null,
    "PermissionName": "",
    "PermissionWay": ""
}])  //权限下拉变量
//权限显示多选框
const GetPermissions = () => {
    httpaxios.get('/api/Permissions/PermissionGet', {}).then(res => {
        console.log(res.data);
        PermissionData.value = res.data.Data;
    })
}
//角色添加请求   今晚完成角色添加
const RoleAddway = () => {
    httpaxios.post("/api/Roles/RoleAdd", {
        "RoleName": RoleData.RoleName,
        "CreateTiem": new Date(),
        "IsUse": true,
        "PermissionIds": RoleData.PermissionIdArray.toString()  //选择的权限主键的字符串
    }).then(res => {
        console.log(res.data);
        if (res.data.Code == 200) {
            ElMessage.success(res.data.Message)
            OpenRoleAdd.value = false;
            getRoleway();  //刷新页面
        }
        else {
            ElMessage.error(res.data.Message)
        }
    })
}
//#endregion

//#region  角色修改部分
const OpenRoleUpdate = ref(false);
//打开对话框并反填
const OpenRoleUpdateWay = (row: any) => {
    console.log(row);
    OpenRoleUpdate.value = true;
    RoleData.Id = row.Id;
    RoleData.RoleName = row.RoleName;
    RoleData.PermissionIdArray = row.CheckedPermissions.split(',').map(Number);
    RoleData.CreateTiem = new Date().toString();
    RoleData.IsUse = true;
}
//角色修改
const RoleUpdateWay = () => {
    httpaxios.put("/api/Roles/RoleUpdate", {
        "Id": RoleData.Id,
        "RoleName": RoleData.RoleName,
        "CreateTiem": new Date(),
        "IsUse": RoleData.IsUse,
        "PermissionIdArray": RoleData.PermissionIdArray.toString()
    }).then(res => {
        console.log(res.data);
        if (res.data.Code == 200) {
            ElMessage.success(res.data.Message)
            OpenRoleUpdate.value = false;
            //刷新页面
            getRoleway();
        }
        else {
            ElMessage.error(res.data.Message)
        }
    })
}
//#endregion
</script>
<style scoped>
.role-list-card {
    margin: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search-add-area {
    display: flex;
    align-items: center;
}

.pagination-container {
    margin-top: 20px;
}
</style>